margin 與 padding

補充昨日的資訊，可以在 chrome 的開發者模式看到一個 Box，其實會隨著各個區塊的設定而有不同，就搭配程式碼與顯示，比較一下差別吧！

CSS

.box1 {
    border: 10px solid gray;
    margin-left: 20px;
    /* margin-bottom: 20px; */
    /* padding-left: 10px; */
    /* padding-bottom: 10px; */
}

.box2 {
    border: 10px solid gray;
    margin-left: 10px;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-bottom: 50px;
}

.box3 {
    border: 10px solid gray;
    margin: 20px;
    padding: 10px;
}

• 一次寫上四邊的設定可以依照上右下左的方式依序填寫，也就是順時針的方式進行設定
• 如果上下相同與左右相同，則可省略成 2 組，如果全部相同，就只要寫 1 組就可以了(一開始寫的模式)

h1 {padding: 5px 10px 15px 20px;}
h1 {padding: 10px 20px;}
h1 {padding: 10px;}

Box Model (盒模型)

• 計算方法：預設的寬 (width)或高 (height) + padding + border
• margin 不計算在內喔！可以觀察剛剛上面 Chrome 顯示的 Box， border 外的框是實線，但是 margin 外的框卻是虛線喔

因此，假設寬高設定如下，上面的 box1、box2、box3 的 Box Model 會是多少呢？

{
    width: 100px;
    height: 100px;
}

box1：120 w x 120 h
box2：135 w x 170 h
box3：140 w x 140 h

臨時測試

昨日的測試答案：類別標籤的話，style 前面要有一個 .，有發現嗎？

.style{
    color: blue;
}

參考資料

• Day04 - CSS內距、邊框、輪廓與邊界範圍

次回

說明如何置中對齊